<template>
  <div style="height:100%;">
   <div v-transfer-dom>
      <actionsheet :menus="menus" v-model="showMenus" show-cancel></actionsheet>
    </div>
  <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
   <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showMore: true}" :right-options="{showMore: true}"
     @on-click-more="showMenus = true">飓风客户服务平台</x-header>
     
        <router-view class="router-view"></router-view>
    
    <tabbar slot="bottom" class="csp-footer">
    <tabbar-item>
        <span slot="label">Copyright © 2017, All Rights Reserved Powered By Danyang Hurricane Logistics Co.,Ltd.</span>
      </tabbar-item>
    </tabbar>
    </view-box>
  </div>
</template>

<script>
import { Actionsheet, ButtonTab, ButtonTabItem, ViewBox, XHeader, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'
import { mapState, mapActions } from 'vuex'
export default {
  directives: {
    TransferDom
  },
  components: {
    ButtonTab,
    ButtonTabItem,
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Loading,
    Actionsheet
  },
  data () {
    return {
      menus: {
        menu1: 'Take Photo',
        menu2: 'Choose from photos'
      },
      showMenus: false
    }
    }
}

</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';

body {
  background-color: #fbf9fe;
}

.csp-footer{
  background:#145fa6!important;
  padding:5px 0px;
}
.csp-footer p{
  background:#145fa6;
  line-height:24px!important;
  color:#71a9de;
}
</style>
